Android Rreact Native 常见错误总结
Android Rreact Native 常见错误总结 1.invariant violation:expected a component class,got[object object] 创建自定义组件首字母要大写，否则会报错. 2.Module 0 is not a registered callable module. 将gradle升级成最新版本(cd Android 进入android目录执行:sudo ./gradlew clean) 或者通过android...
2024-01-10
react native axios 封装组件
一、最近在研究react native的网络请求，然后自己封装了一个来练习1.添加axios 和querystring依赖yarn add axios && yarn add querystring2.新建 src/common/httpBaseConfig.js3.新建 src/utils/http/index.jsimport axios from 'axios';import qs from 'querystring';import baseConfig from '../../common/http...
2024-01-10
React Native for Android 学习笔记
C:\Users\Vic Lee\AwesomeProject>react-native run-androidStarting JS server...Running D:\Android\sdk/platform-tools/adb reverse tcp:8081 tcp:8081error: closedCould not run adb reverse: Command failed: D:\Android\sdk/platform-tools/adb reverse tcp:8081 tcp:8...
2024-01-10
react native xcode修改项目名
1. 选中旧工程名，改为新的然后选择rename2. 依次选择黄色文件夹，修改名字，千万不要在Xcode外修改！！！修改结果为3. 点击搜索，搜索旧项目名点击Find，改为Replace全部替换掉4. 此时，还剩下一些需要手动修改，再次查找直至全部没有为止5. 进入Tests和UITests文件夹，修改文件名，千万不...
2024-01-10
react radio onchange事件点击无效
记： 项目需求： 页面中radio默认选中 第一次进去页面 点击radio的时候不管怎样点击 都是选中 连onChange事件都没触发 进入页面 点击刷新 点击radio的时候 就能触发onChange事件了 不知道react中的radio 触发是什么梗 ...
2024-01-10
React Native App设置&Android版发布
React Native系列《逻辑性最强的React Native环境搭建与调试》 《ReactNative开发工具有这一篇足矣》 《解决React Native unable to load script from assets index.android.bundle on windows》 《React Native App设置&Android版发布》 一、设置APP信息1.设置包名、版本号目录：~/android/app/build.gradle2.设置应用名目录：~/android/app/sr...
2024-01-10
React 动画 Animation
文章源自: https://facebook.github.io/react/docs/animation.htmlReactCSSTransitionGroup 基于 ReactTransitionGroup ,当一个React组件enter或者leave时可以方便的用来执行CSS transitions和animations。导入ReactCSSTransitionGroupimport ReactCSSTransitionGroup from 'react-addons-css-transition-...
2024-01-10
react native 日常-集成antd-mobile-rn蚂蚁金服插件
antd-mobile-rn阿里开源框架link. 组件官网1.常规npm// 终端内导入组件npm install antd-mobile-rn --save2.使用// 项目内使用组件import { 需要的组件 } from 'antd-mobile';3.例如时间选择器// 该组件时间格式需转换//import moment from "moment";转换时间 <DatePicker value={moment(时间).toDate()} m...
2024-01-10
react native 之三 reactJSX基础
1. ReactJS 和 React Native 比较2.reactJSX书写借鉴于XHTML的一些规范 (1)开始和结束标签配对 <组件>ooxx</组件> (2)无内容的组件标签应写为自封闭标签 <组件/> (3)可自定义属性,字符串值应使用双引号,其他值用{}括起来 <Person age = {23} sex = "male" married = {tr...
2024-01-10
react-native-tab-navigation
原文地址安装npm install react-native-tab-navigator --save引入import TabNavigator from 'react-native-tab-navigator'如下面所示：import React, { Component } from 'react';import { Platform, StyleSheet, Text, View, Image} from 'react-native';import TabNavigato...
2024-01-10
React Native & Android & iOS & APK
React Native & Android & iOS & APK React Native & Android & ...
2024-01-10
react 实现 loading 动效圈，支持配置转一圈的 duration
本文地址： https:////www.cnblogs.com/veinyin/p/12442768.html需求：圆环从无到整，变成整圈后要有个渐隐效果实现效果如下 左右两个半圆相接处有一条灰色的边 这个暂时还没解决实现思路： 1. 左右两个半圆拼接成一个整圆，圆环通过 border 实现，最后 animation 实现动画效果 2. 先旋转右半边，0-45%旋转...
2024-01-10
Android React Native 开发环境搭建---windows下
环境搭建环境搭建可以参考RN官网，也可以参考中文版本：http://reactnative.cn/docs/0.45/getting-started.html如果你希望可以看到原版的安装流程，可以看官方的地址，本文只是我个人的实践，并且仅限于window平台。官方的地址：https://facebook.github.io/react-native/docs/getting-started.html1.下载Chocolatey去官网下载，一...
2024-01-10
你不可不知的 React Native 混合用法（Android 篇）
前言当前 React Native 虽说版本更新比较快，各种组件也提供的很全面了，但是在某些情况下，混合开发的方式才会快速缩短开发周期，原因无非就是原生平台的“底蕴”无疑更深，拥有众多且类型丰富的第三方支持库。很多情况下，运用这些库可以避免苦逼的重复劳动。接下来我们以 [jpush-react-native ...
2024-01-10
使用react-native-tab-navigator切换页面
切换页面是app最基本功能。这个功能需要用Navigation组件实现。RN发展太快了(v49)，之前自带的Navigation组件被弃用了，如果只针对ios，还可以用NavigatorIOS社区中也有几个不错的https://github.com/react-community/react-navigationhttps://github.com/wix/react-native-navigationhttps://github.com/happypancake/react-native-tab-navi...
2024-01-10
react-native textArea 高度不变化问题
ref={el =>{ if(el){ el.textareaRef.style.height = el.textareaRef.scrollHeight + 'px'; } } } ...
2024-01-10
Mac 配置安卓React Native 开发环境（苹果和Android双端）
前言 由于近段时间前端React的火热，主要使用React语法用一套代码生成苹果和安卓双端代码的React-native开发备受关注，本人由于项目需要，也开始入门React-native； PS：对于想要学习RN的友友们，入门一Mac是必须的了，哈哈哈！配置React-Native环境 本人在mac上配置RN环境，首先进入RN官网，按...
2024-01-10
【安卓】React Navigation 5.x详解
一、 React Navigation简介在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在RN应用开发过程中，早期的路由可以直接使用官方提供的Navigator组件，不过从0.44版本开始，Navigator被官方从react native的核心组件库中剥离出来，放到react-native-deprecated-custom-components的模块中，并且Navigator组件也不...
2024-01-10![[React Native]访问操作系统剪贴板 Clipboard](/wp-content/uploads/thumbs/534337_thumbnail.jpg)
[React Native]访问操作系统剪贴板 Clipboard
我们之前学习了TextInput组件, 有时候我们需要在TextInput组件中复制或者粘贴一些文字。 React Native为开发者提供了 Clipboard API,Clipboard 组件可以在iOS和Android的剪贴板中读写内容。目前还只支持获取或者存放字符串。static getString() 获取剪贴板的文本内容，返回一个Promise(后面会介绍) 你可以用下面的方式...
2024-01-10
react-native 轮播组件 looped-carousel使用介绍
一 关于轮播类组件，网上其实已经有挺多了，本人曾经用过 swiper，viewpager，以及facebook出品的viewpagerAndroid。swiper因在安卓上有问题，而且在组件嵌套使用时问题较多，所以弃用。后来尝试viewpager，因为轮播时，下面的圆点显示有误，所以弃用。而ViewpagerAndroid因为只支持安卓系统，所以很少用到，在...
2024-01-10![[RN] React Native 使用 阿里 ant-design](/wp-content/uploads/thumbs/534683_thumbnail.jpg)
[RN] React Native 使用 阿里 ant-design
React Native 使用 阿里 ant-design 实例效果如图：一、安装npm install antd-mobile-rn --savenpm install babel-plugin-import --save-dev二、配置编辑根目录下 .babelrc 增加 红色区域显示代码{ "presets": [ "module:metro-react-native-babel-preset" ], "plugins": [ [ "import", { ...
2024-01-10
React Native 适配Android物理返回键，实现连续两次点击退出
一直使用iPhone作为测试机开发,提交给测试同事Android版本后发现很多适配问题,其中一个非常明显的是,弹出一个modal后,点击Android的返回键,modal不会消失,直接navigation goBack了在Android端需要处理物理按键事件 , 另外可以实现连续两次点击退出APP的功能 componentDidMount(): void { //挂载完,添加返回按键的监...
2024-01-10
react 百度地图中信息框infoWindow再插入echart视图
需求是在红框中再插入一个echart视图总感觉并不能直接响应react组件，好像百度地图弹出框是另外一个封装的dom。在infoWindow中的代码是：var content =...'<div class="trendContent">' +'<p class="bule">趋势图</p>' +'<p class="unit">单位/K</p>' +'</div>' +'<div id="main"></div>' +'</div>';随便插入一个官方视图componentDidMount() {v...
2024-01-10
react-native 三级联动城市 react-native-picker
第一步：装依赖,把react-native-picker的依赖放在src/node_modules里面在 package.json里面引入"react-native-picker": "file:./src/node_modules/react-native-picker",说明：src/node_modules是自己在src 里面创建的node_modules，跟项目自带的node_modules 不一样###使用import React from 'react';import { StyleSheet,...
2024-01-10
React-navigation StackNavigator 使用攻略
目前的项目迭代进展到使用navigation来串联不同的screen，但是在涉及到对navigationOptions进行定制的时候由于版本的问题，网上的很多资料其实都是已经过时了的（有些则是并不相干）。本文针对RN 0.44，React-navigation ^1.0.0-beta.11，进行navigationOptions的解释。 首先是navigationOptions的两种使用方法。...
2024-01-10
